<template>
	<view class="bg" :style="{backgroundImage:'url('+imagesurl+'/images/blueBg1.png)'}">
		<view class="top">
			<view style="margin:0 auto 40rpx auto;width: 140rpx;">
				<u-image src="/static/addphone.png" width="140" height="60"></u-image>
			</view>

			<view class="des">{{phone}}</view>

			<!-- <view class="dis">

				<view>抵扣券抵扣</view>
				<view>-￥{{price}}
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</view> -->

		</view>
		
		<view class="top2">
			<view style="margin:0 auto 40rpx auto;width: 140rpx;">
				<u-image src="/static/addmoneny.png" width="140" height="60"></u-image>
			</view>

			<view class="row">
				<view class="btn" v-for="(item,index) in btnList" :key="index" :class="current==index?'change':''"
					@click="cbtnList(item,index)">
					{{item.money}}
				</view>
			</view>


		</view>
		
<view class="top2">
			<u-cell-group :border="false">
				<u-cell-item title="代金券抵扣" :value="price" :arrow="false" :border-bottom="false"></u-cell-item>
				<u-cell-item title="剩余支付金额" :value="monenyIng" :arrow="false" :border-bottom="false"></u-cell-item>
			</u-cell-group>
			
		</view>


		<u-button shape="circle"
			:custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx',width:'500rpx',marginBottom:'40rpx'}" @click="submit">
			确认充值</u-button>
			
			
			
			<rule titleID="8"></rule>
			
			<u-toast ref="uToast" />
	</view>
</template>

<script>
	import rule from '../../components/rule.vue';
	import url from '@/common/baseUrl.js';
	import payway from '../../common/wxpay.js';
	export default {
		components: {
			rule
		},
		data() {
			return {
				imagesurl: url.imageUrl,
				phone: "",
				price: "",
				btnList: [],
				current: 0,
				id:"",
				monenyIng:""
			}

		},
		onLoad(options) {
			
			if(options.money){
			  
				this.id=options.id;
				this.price=options.money;
				this.get()
				this.miamer()
			}
			
		},
		methods: {
			cbtnList(item, index) {
				this.current = index;
				this.jisuan()
			},
			jisuan(){
				this.monenyIng=(this.btnList[this.current].money-this.price).toFixed(2)
				if(this.monenyIng<=0){
					this.monenyIng='0.00'
				}
			},
			miamer(){
				this.$u.post('/api/index/faceValue', {
					
				}, {}).then(res => {
				  this.btnList=res.data
					this.jisuan()
				}).catch(err => {})
			},
			get(){
				this.$u.post('/api/user/information', {
					
				}, {}).then(res => {
				    this.phone=res.data.mobile
					
				}).catch(err => {})
			},
			submit(){
				this.$u.post('/api/indent/recharge', {
					member_tel_charge_id:this.id,
					face_value_id:this.btnList[this.current].id
				}, {}).then(res => {
				    if(res.data){
						
						
					
						var  packages=res.data.package;
												var {noncestr,timestamp,signtype,paysign}=res.data
						 payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {		
									this.$refs.uToast.show({
											title: '充值成功',
											type: 'success',
											back:true
									})	
											
						}).catch(err => {
						    
						})
						
						return
					}
					this.$refs.uToast.show({
							title: '充值成功',
							type: 'success',
							back:true
					})
					
				}).catch(err => {})
			}
		}
	}
</script>

<style>
	.bg {
		/* background-image: url(../../static/blueBg.png); */
		width: 100%;
		min-height: 100%;
		background-size: cover;
		display: inline-block;
	}

	.top {
		width: 690rpx;
	
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx;
		margin: 40rpx auto;
	}

	.top2 {
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx;
		margin: 40rpx auto;
	}

	.des {

		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;


	}

	.dis {

		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #FF6450;
		border-radius: 20rpx;
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		padding: 0 40rpx;
		color: #FFFFFF;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
	}

	.btn {
		width: 160rpx;
		height: 66rpx;
		line-height: 66rpx;
		background: #F7F7F7;
		border-radius: 60rpx;
		text-align: center;
		color: #999999;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.change {
		background: #628DFF;
		color: #FFFFFF;
		opacity: 1;
		transition: all 0.3s
	}
</style>
